<template>
	<!-- 投资方案 -->
	<div class="tobeDone">
		<tableIndex
			:tableData="tableData"
			:tableHead="tableHead"
			:isIndex="true"
			:isSelection="true"
			:notSearch="true"
			:isRadio="false"
			:height="500"
			:page="state.page"
			@page-change="pageChange"
			@resetList="resetList"
		>
			<template #btns> </template>
			<template #operate>
				<el-table-column label="操作" width="200" fixed="right">
					<template #default="{ row }">
						<el-button
							size="small"
							class="look"
							type="primary"
							@click="viewHandel(row)"
							>查看方案</el-button
						>
					</template>
				</el-table-column>
			</template>
		</tableIndex>
	</div>

	<public-dialog
		:title="'投资方案详情'"
		:width="'40%'"
		:confirmButtonTitle="'保存'"
		v-model:visible="visible"
		@onConfirm="onConfirm"
	>
		<div class="title_ m-b20">
			<svg-icon icon-class="investment-icon-home" class="status-icon" />
			树兰（成都）医院有限公司
			<span class="m-l10">下载</span>
		</div>
		<div class="bxo d-flex">
			<div class="box_l m-r20">
				<div class="title m-b10">方案预览：</div>
				<div class="content"></div>
			</div>
			<el-divider direction="vertical" />
			<div class="box_r m-l20">
				<div class="title m-b10">关键信息编制：</div>
				<div class="content">
					<div class="col d-flex">
						<div class="label">项目概览</div>
						<div class="text">项目概览xxx</div>
					</div>
					<div class="col d-flex">
						<div class="label">项目名称</div>
						<div class="text">项目概览xxx</div>
					</div>
					<div class="col d-flex">
						<div class="label">启动时间</div>
						<div class="text">项目概览xxx</div>
					</div>
				</div>
			</div>
		</div>
	</public-dialog>
</template>

<script setup>
import tableIndex from "@/components/table/index.vue";
import { fundApi } from "@/api/project";
import { ref, onMounted, reactive } from "vue";
import PublicDialog from "@/components/PublicDialog.vue";
import { useRouter } from "vue-router";
import { ElDivider, ElForm, ElRow, ElCol } from "element-plus";

const router = useRouter();
const state = reactive({
	page: {
		page: 1,
		pageSize: 10,
		total: 0,
	},
});
// const info = ref(null)
const tableData = ref([{}]);
const tableHead = ref([
	{
		prop: "projectSetName",
		label: "方案名称",
	},
	{
		prop: "projectName",
		label: "文件类型",
	},
	{
		prop: "projectId",
		label: "文件大小",
	},
	{
		prop: "year",
		label: "审批结果",
		formatter: (row) => {
			return row.status ? "已申报" : "未申报";
		},
	},
	{
		prop: "quarter",
		label: "审批意见",
	},
	{
		prop: "accessAmount",
		label: "审批人",
	},
]);

const visible = ref(false);
const onConfirm = (row) => {};
const viewHandel = (row) => {
	visible.value = true;
};

const resetList = (e) => {
	getPage();
};
//分页变化
const pageChange = (e) => {
	state.page.page = e.page;
	state.page.pageSize = e.limit;
	getPage();
};
const getPage = (e) => {
	let obj = {
		pageNum: state.page.page,
		pageSize: state.page.pageSize,
		param: {
			...e,
		},
	};
	fundApi.getWeekPageList(obj).then((res) => {
		if (res.code == "200") {
			tableData.value = res.data.content;
			state.page.total = res.data.totalSize;
		}
	});
};
onMounted(() => {
	// getPage()
});
</script>

<style lang="scss" scoped>
.tobeDone {
	width: 100%;
	height: 100%;
}

.title_ {
	font-size: 16px;
	font-family: SourceHanSansCN-Bold, SourceHanSansCN;
	color: #000000;
}

.bxo {
	width: 100%;
	.title {
		font-size: 12px;
		font-family: SourceHanSansCN-Medium, SourceHanSansCN;
		font-weight: 500;
		color: #7d7d9a;
		line-height: 18px;
	}
	.box_l {
		width: 347px;

		.content {
			width: 100%;
			height: 500px;
			background: #d8d8d8;
			border: 1px solid #979797;
		}
	}
	.box_r {
		width: 350px;
		.content {
			width: 100%;
      .col {
        margin-bottom: 10px;
        .label {
          width: 80px;
        }
        .text{
        }
      }
		}
	}

	.el-divider {
		min-height: 550px;
	}
}
</style>
